<template>
  <div :id="id" style="width: 100%;height: 100%;"/>
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: {
    id: {
      type: String,
      default: 'main'
    },
    data: {
      type: Object,
      default () {
        return {
          xAxis: ['一号', '二号', '三号', '四号', '五号', '六号'],
          yAxis: [120, 200, 150, 80, 70, 110]
        }
      }
    },
    title: {
      type: String,
      default: '机器人电压'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '70%'
    }
  },
  mounted () {
    this.draw()
  },
  methods: {
    draw: function () {
      var chartDom = document.getElementById(this.id)
      var myChart = echarts.init(chartDom)

      const option = {
        title: {
          text: this.title,
          textStyle: {
            color: '#fff',
            fontWeight: 'normal',
            fontSize: 15
          }
        },
        xAxis: {
          type: 'category',
          data: this.data.xAxis,
          axisLabel: {
            color: '#fff',
            rotate: 35 // 设置 x 轴文字角度为 45 度
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff'
          }
        },
        grid: {
          width: '87%', // 图表宽度
          height: '70%', // 图表高度
          top: 40,
          left: 30
        },
        series: [
          {
            data: this.data.yAxis,
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#67e0e3'}, // 起始颜色
                {offset: 1, color: '#37a2da'}  // 结束颜色
              ])
            }
          }
        ]
      }

      option && myChart.setOption(option, true)
    }
  }
}
</script>

<style scoped lang="scss"></style>
